import React, { Component } from 'react'
import axios from '../utils/request'
import '../css/skin.css'
import {
    LeftOutlined,
    SearchOutlined,
} from '@ant-design/icons';

export default class Bone extends Component {
    state = {
        list: []
    }

    componentDidMount() {
        axios({
            url: '/getlist',
            method: 'post'
        }).then(res => {
            this.setState({
                list: res.data.data
            })
        })
    }
    goback() {
        this.props.history.go(-1)
    }
    detail(id) {
        this.props.history.push(`/detail/` + id);
    }
    search(value) {
        axios({
            url: '/search3',
            method: 'post',
            data: {
                value: value
            }
        }).then(res => {
            this.setState({
                list: res.data.data
            })
        })
    }
    render() {
        const { list } = this.state
        return (
            <div className='skin'>
                <div className='skin_header'>
                    <li onClick={() => this.goback()}><LeftOutlined /></li>
                    <li>商品列表</li>
                    <li></li>
                </div>
                <div className='skin_main'>
                    <div className="input">
                        <div className='icon'>
                            <SearchOutlined />
                        </div>
                        <input placeholder="请输入药品名" onChange={(e) => this.search(e.target.value)}></input>
                    </div>
                    <div className='skin_main_one'>
                        {
                            list.length && list.map((item, index) => {
                                return <div className='skin_one' key={index}>
                                    <img src={item.breathe} onClick={() => this.detail(item.id)}></img>
                                    <div>
                                        <li>{item.brealist}</li>
                                        <li>3毫克*{item.sktype}粒</li>
                                        <li className='li'><span>￥{item.breaprice}</span>&emsp;<span>处方药</span>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span>天士力大药房</span></li>
                                    </div>
                                </div>
                            })
                        }
                    </div>
                </div>
            </div>
        )
    }
}
